Jassif Team Institution

export default {
  data() {
    return {
      rangeVal: 4
    };
  },
  watch: {
    rangeVal(val) {
      if( val>20 && val<70) {
        if(val<40){
          this.rangeVal = 20;
        }
        else {
          this.rangeVal = 70;
        }
      }
    }
  }
};

<template>
  <h2>Example watch Option</h2>
  <p>The 'rangeVal' watcher is written with the object syntax, with immediate: true, so that rangeVal is moved to '70' when the page first loads:</p>
  <input type="range" v-model="rangeVal">
  <p>rangeVal: <span>{{ rangeVal }}</span></p>
</template>

<script>
export default {
  data() {
    return {
      rangeVal: 40
    };
  },
  watch: {
    rangeVal: {
      handler(val) {
        if (val > 20 && val < 70) {
          if (val < 40) {
            this.rangeVal = 20;
          }
          else {
            this.rangeVal = 70;
          }
        }
      },
      immediate: true
    }
  }
};
</script>

<style>
span {
  padding: 3px;
  font-weight: bold;
  font-family: 'Courier New', Courier, monospace;
  background-color: lightgreen;
}
</style>